<template>
  <div
    class="full-screen flex-center bg-gradient-to-r from-green-400 to-blue-500"
  >
    <n-card class="!w-110 card hover-scale">
      <div class="flex-col-center">
        <div class="gradient-text text-3xl font-bold">系统登录</div>
        <p class="text-secondary mt-2">欢迎回来，请输入您的账号密码</p>
      </div>

      <n-form
        ref="formRef"
        :model="loginForm"
        :rules="rules"
        label-placement="left"
        label-width="0"
        require-mark-placement="right-hanging"
        class="mt-8"
      >
        <n-form-item path="username">
          <n-input
            v-model:value="loginForm.username"
            placeholder="请输入用户名"
            class="h-45px hover-opacity"
          >
            <template #prefix>
              <n-icon
                :component="PersonOutline"
                class="text-lg text-secondary"
              />
            </template>
          </n-input>
        </n-form-item>

        <n-form-item path="password" class="mt-4">
          <n-input
            v-model:value="loginForm.password"
            type="password"
            show-password-on="click"
            placeholder="请输入密码"
            class="h-45px hover-opacity"
          >
            <template #prefix>
              <n-icon
                :component="LockClosedOutline"
                class="text-lg text-secondary"
              />
            </template>
          </n-input>
        </n-form-item>

        <div class="flex-between mt-2 px-2">
          <n-checkbox class="text-secondary">记住密码</n-checkbox>
          <n-button text type="primary" class="hover-opacity"
            >忘记密码？</n-button
          >
        </div>

        <div class="flex-col-center gap-4 mt-8">
          <n-button
            type="primary"
            :loading="loading"
            class="w-full h-45px text-16px hover-opacity"
            @click="handleLogin"
          >
            {{ loading ? "登录中..." : "登 录" }}
          </n-button>

          <div class="flex-center gap-2 text-14px">
            <span class="text-secondary">还没有账号？</span>
            <n-button text type="primary" class="hover-opacity"
              >立即注册</n-button
            >
          </div>
        </div>
      </n-form>

      <div class="flex-center gap-4 mt-8 text-secondary">
        <div class="flex-center gap-2 cursor-pointer hover-opacity">
          <!-- <n-icon><github-outline /></n-icon> -->
          <span>GitHub</span>
        </div>
        <div class="flex-center gap-2 cursor-pointer hover-opacity">
          <n-icon><LogoGoogle /></n-icon>
          <span>Google</span>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import {
  PersonOutline,
  LockClosedOutline,
  // GiftOutline,
  LogoGoogle,
} from "@vicons/ionicons5";
import { UserService } from "@/api";
import type { FormInst } from "naive-ui";
import { useRouter } from "vue-router";

const userService = new UserService();
const message = useMessage();
const loading = ref(false);
const formRef = ref<FormInst | null>(null);
const router = useRouter();

const loginForm = ref({
  username: "admin",
  password: "123456",
});

const rules = {
  username: {
    required: true,
    message: "请输入用户名",
    trigger: ["blur", "input"],
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: ["blur", "input"],
  },
};

const handleLogin = async () => {
  try {
    loading.value = true;
    await formRef.value?.validate();
    const { token } = await userService.login(loginForm.value);
    localStorage.setItem("token", token);
    message.success("登录成功");
    router.push("/dashboard/index");
  } catch (error: any) {
    if (error?.message) {
      message.error(error.message);
    }
  } finally {
    loading.value = false;
  }
};
</script>
